<template>
	<div>
		<Issue />
		<div class="zhuanbox" v-for="(item,index) in list" @click="quessdets(item)">
			<image class="one-img" :src="item.image" mode=""></image>
			<div class="text-box">
				<p class="questile">{{item.questions}}</p>
				<div>
					<p class="title">{{item.title}}</p>
					<p>{{item.text}}</p>
				</div>
				<div class="icon">
					<div class="icon-box" @click.stop="shoucang(item)">
						<img class="icon-img" src="../../static/image/questions/like.png" alt="" />
						<span>{{item.like}}</span>
					</div>
					<div class="icon-box">
						<img class="icon-img" src="../../static/image/questions/eyes.png" alt="" />
						<span>{{item.watch}}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Issue from "../../components/issue/issue.vue";
	import {
		questions,
		updataques
	} from '../../api/index.js'
	export default {
		components: {
			Issue,
		},
		data() {
			return {
				list: []
			}
		},
		methods: {
			quessdets(item) {
				// console.log(item);
				item.watch = Number(item.watch) + 1
				updataques(item).then(res => {
					console.log(res);
				})
				if (item.id == 1) {
					uni.navigateTo({
						url: `/pages/questions/quesdetsone?id=${item.id}`
					})
				} else if (item.id == 2) {
					uni.navigateTo({
						url: `/pages/questions/quesdets?id=${item.id}`
					})

				} else {
					uni.navigateTo({
						url: `/pages/questions/quesdetsthree?id=${item.id}`
					})
				}
			},
			shoucang(item) {
				item.like = Number(item.like) + 1
				updataques(item).then(res => {
					console.log(res);
				})
			}
		},
		onLoad() {
			questions().then(res => {
				this.list = res.data
			})
		},
	}
</script>

<style scoped>
	.zhuanbox {
		width: 742rpx;
		height: 360rpx;
		margin: 20rpx auto;
		border-radius: 10px;
		overflow: hidden;
		position: relative;
		font-size: 24rpx;
		color: #A5A5A5;
	}

	.one-img {
		width: 100%;
		height: 100%;
	}


	.text-box {
		position: absolute;
		top: 60rpx;
		left: 100rpx;
	}

	.icon {
		width: 200rpx;
		display: flex;
		margin-top: 40rpx;
	}

	.icon-box {
		width: 400rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
	}

	.icon-img {
		width: 24rpx;
		height: 24rpx;
		margin: 0 10rpx;
	}

	div.zhuanbox:nth-of-type(2) .text-box {
		font-size: 30rpx;
		position: absolute;
		left: 480rpx;
	}

	div.zhuanbox:nth-of-type(3) .text-box {
		font-size: 30rpx;
		position: absolute;
		left: 100rpx;
		color: white;
	}

	.questile {
		margin-bottom: 40rpx;
		font-size: 40rpx;
		color: #000;
	}

	.title {
		color: #000;
		font-size: 28rpx;
	}

	div.zhuanbox:nth-of-type(3) .questile {
		margin-bottom: 40rpx;
		font-size: 40rpx;
		color: #fff;
	}

	div.zhuanbox:nth-of-type(3) .title {
		color: #fff;
		font-size: 28rpx;
	}
</style>